<template>
	<div class="app-container">
		<div class="content">
			<nextnav :navnum='navnum'></nextnav>
			<el-form :model="json" :rules="rules" ref="json" label-width="100px" class="demo-ruleForm">
				<el-form-item class="informationaa" label="批次名称:" prop="batchName">
					<el-input v-model="json.batchName" class="selects" size="mini" placeholder="请输入批次名称"></el-input>
				</el-form-item>
				<el-form-item class="informationaa" label="保险公司:" prop="insuranceId">
					<!--<el-select :disabled="comeprev" class="selects" size="mini" v-model="json.insuranceId" placeholder="请选择保险公司" @change="changecomony(json.insuranceId)">
						<el-option class="selects"  v-for="item in options" :label="item.insuranceName" :value="item.id">
						</el-option>
					</el-select>-->
					<el-select :disabled="comeprev" class="selects" size="mini" v-model="json.insuranceId" placeholder="请选择保险公司" @change="changecomony(json.insuranceId)">
						<el-option-group v-for="group in options" :key="group.letter" :label="group.letter">
							<el-option v-for="item in group.insurances" :key="item.id" :label="item.insuranceName" :value="item.id">
							</el-option>
						</el-option-group>
					</el-select>
				</el-form-item>
				<el-form-item class="informationaa" label="适用工号:" prop="staffId">
					<el-select :disabled="comeprev" class="selects" size="mini" multiple v-model="json.staffId" placeholder="请选择适用工号">
						<el-option class="selects" v-for="item in workoptions" :label="item.staffAccount" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item class="informationaa informations" label="有效时间:" required>
					<el-col :span="10">
						<el-form-item prop="effectiveDate">
							<el-date-picker :disabled="comeprev" class="dateinp" size="mini" v-model="json.effectiveDate" :picker-options="startDateOpt" prefix-icon=" " type="datetime" placeholder="生效时间"></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col class="line" :span="3">到</el-col>
					<el-col :span="8">
						<!--endateprop-->
						<el-form-item :prop="endateprop">
							<el-date-picker class="dateinp" size="mini" v-model="json.expiryDate" :picker-options="endDateOpt" :disabled="islimits" prefix-icon=" " type="datetime" placeholder="截止时间"></el-date-picker>
						</el-form-item>
					</el-col>
					<div class="sscheckbox">
						<el-checkbox :disabled="comeprev" v-model="islimit">不限</el-checkbox>
					</div>
				</el-form-item>
				<el-form-item class="informationaa" label=" ">
					<p class="texts">
						以<span>{{chosedates}}</span>作为匹配日期类型
					</p>
				</el-form-item>
				<el-form-item class="informationaa" label="是否奖励批次:">
					<el-checkbox :disabled="comeprev" class="" v-model="json.isReward"></el-checkbox>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="small" class="btn" @click="btn('json')">下一页</el-button>
				</el-form-item>
				<!--<el-button type="primary" size="small" class="btn" @click="btn">下一页</el-button>-->
			</el-form>
		</div>
	</div>
</template>
<script>
	import Vue from 'vue'
	import nextnav from './assembly/nextnav'
	export default {
		data() {
			return {
				navnum: 0,
				value: "",
				chosedates: "支付日期",
				islimit: true,
				options: [],
				workoptions: [],
				endateprop: "",
				rules: {
					batchName: [{
							required: true,
							message: '请输入批次名称',
							trigger: 'blur'
						},
						{
							min: 1,
							max: 50,
							message: '长度在 1 到 50个字符',
							trigger: 'blur'
						}
					],
					insuranceId: [{
						required: true,
						message: '请选择保险公司',
						trigger: 'change'
					}],
					staffId: [{
						required: true,
						message: '请选择适用工号',
						trigger: 'change'
					}],
					effectiveDate: [{
						type: 'date',
						required: true,
						message: '请选择生效日期',
						trigger: 'change'
					}],
					expiryDate: [{
						type: 'date',
						required: true,
						message: '请选择截止日期',
						trigger: 'change'
					}],
				},
				json: {
					//					//真被观测批次id
					//					id: "",
					batchName: "",
					//公司id
					insuranceId: "",
					//工号id
					staffId: "",
					//开始
					effectiveDate: "",
					//结束
					expiryDate: "",
					//是奖励
					isReward: false,
				},
				endDateOpt: this.enddate(),
				startDateOpt: this.startdate(),
				comeprev: false,
				islimits: true,
				staffId: []
			}
		},
		mounted() {
			this.getcommoy()
			if(this.$route.query.batchId) {
				console.log(111)
				console.log(this.$route.query.batchId)
				this.json.id = this.$route.query.batchId
				this.comeprev = true
				this.getinter()
			} else {
				console.log(222)
			}
		},
		methods: {
			getinter() {
				let params = {
					id: this.json.id
				};
				this.post(params, "services/app/policy/GetPolicyBatchBasic").then(res => {
					console.log("success")
					console.log(res)
					Vue.set(this.json, 'batchName', res.result.batchName)
					//this.json.batchName=res.result.batchName
					Vue.set(this.json, 'insuranceId', res.result.insuranceId)
					//insuranceId
					//this.json.insuranceId=res.result.batchName
					//this.json.staffId=res.result.staffNames

					var brr = []
					for(var i = 0; i < res.result.staffNames.length; i++) {
						this.staffId.push(res.result.staffNames[i].staffId) //staffAccount
						if(res.result.staffNames[i].describe != "") {
							brr.push(res.result.staffNames[i].staffAccount + " (" + res.result.staffNames[i].describe + ")")
						} else {
							brr.push(res.result.staffNames[i].staffAccount)
						}

						//this.workoptions[i].staffAccount+" ("+this.workoptions[i].describe+")"
					}
					Vue.set(this.json, 'staffId', brr)
					this.json.effectiveDate = res.result.effectiveDate
					this.json.isReward = res.result.isReward
					if(res.result.expiryDate) {
						console.log("true")
						this.json.expiryDate = res.result.expiryDate
						//this.islimits=false
					} else {
						console.log("false")
						this.json.expiryDate = ""
						//this.islimit=true
					}
				});
			},
			//开始时间
			startdate() {
				var that = this
				return {
					disabledDate(time) {
						if(that.json.expiryDate != "") {
							return time.getTime() > that.json.expiryDate
						}
					}
				}
			},
			//结束时间
			enddate() {
				var that = this
				return {
					disabledDate(time) {
						return time.getTime() < that.json.effectiveDate
					}
				}
			},
			//获取公司列表
			getcommoy() {
				let params = {};
				this.post(params, "services/app/common/GetGroupInsurances").then(res => {

					this.options = res.result.items
				});
			},
			//更改公司
			changecomony(val) {
				this.getWorknumber(val)
				this.getdatetype(val)
				this.json.staffId = []
			},
			//获取工号
			getWorknumber(val) {
				console.log(val)
				let params = {
					id: val
				};
				this.post(params, "services/app/common/GetCurrentStaffs").then(res => {
					console.log("num")
					console.log(res)
					this.workoptions = res.result.items
					for(var i = 0; i < this.workoptions.length; i++) {
						if(this.workoptions[i].describe != "") {
							this.workoptions[i].staffAccount = this.workoptions[i].staffAccount + " (" + this.workoptions[i].describe + ")"
						} else {
							this.workoptions[i].staffAccount = this.workoptions[i].staffAccount
						}

					}
				});
			},
			//获取什么日期
			getdatetype(val) {
				let params = {
					id: val
				};
				this.post(params, "services/app/policy/GetInsuranceRuleDate").then(res => {
					this.chosedates = res.result
				});
			},
			btn(formName) {
				console.log(this.json)
				if(this.$route.query.batchId) {
					Vue.set(this.json, 'staffId', this.staffId)
					let params = this.json
					this.post(params, "services/app/policy/CreateUpperPolicyBatch").then(res => {
						console.log(res)
						this.$router.push({
							name: "policyupper2",
							query: {
								batchId: res.result.batchId
							}
						})
					});
				} else {
					this.$refs[formName].validate((valid) => {
						console.log(123)
						if(valid) {
							let params = this.json
							this.post(params, "services/app/policy/CreateUpperPolicyBatch").then(res => {
								console.log(res)
								this.$router.push({
									name: "policyupper2",
									query: {
										batchId: res.result.batchId
									}
								})
							});
						} else {
							console.log(235)
							return false;
						}
					});
				}

			}
		},
		components: {
			nextnav,
		},
		watch: {
			islimit() {
				if(this.$route.query.batchId) {
					this.islimits = false
				} else {
					if(this.islimit == true) {
						this.json.expiryDate = ""
						this.endateprop = ''
						this.islimits = true
					} else {
						this.endateprop = 'expiryDate'
						this.islimits = false
					}
				}

			}
		}

	}
</script>
<style lang="scss" scoped>
	.content {
		width: 1005px;
		height: 100%;
		margin: 0 auto;
	}
	
	.informationaa {
		width: 514px;
		margin: 0 auto 40px;
	}
	
	.selects {
		width: 396px;
	}
	
	.informations {
		margin-bottom: 0;
		position: relative;
		div {
			position: relative;
			.sscheckbox {
				position: absolute;
				right: -95px;
				top: 0;
				height: 100%;
				width: 80px;
			}
		}
	}
	
	.btn {
		display: block;
		margin: 40px auto;
	}
	
	.texts {
		width: 385px;
		margin-top: 10px;
		font-size: 13px;
		color: #CBCBCB;
		letter-spacing: 0;
		text-align: left;
		text-indent: 0;
		margin: 20px 0 0 0;
		line-height: 18px;
		span {
			color: #1989FA;
		}
	}
	
	.dateinp {
		width: 171px;
	}
	
	.line {
		text-align: center;
	}
</style>